import React, { Component } from 'react'
// 推荐讲BrowserRouter重命名为Router
// 1.导入Router,Route,Redirect
import { Router,Route,Switch,Redirect} from 'react-router-dom'

import Test from './pages/Test'
import Login from './pages/Login'
import Layout from './pages/Layout'
import { getToken } from 'utils/storage'
import AuthRoute from './components/AuthRoute';
import history from 'utils/history'
export default class App extends Component {
  render() {
    return (
      <div>
        {/* 2.实例化路由Router 
              所有的代码,都要包在Router组件内
        */}
        {/* 组装BrowserRouter */}
        {/* 使用Router组件代替BrowerRouter  给他分配history属性 */}
        <Router history={history}>
          <Switch>
            {/* 3.设置匹配规则和挂载点 */}
            {/* React路由中,默认是不会匹配到第一个就停止匹配 */}
            {/* Switch负责匹配到第一个组件后,就不会继续向后匹配 */}
            {/* Switch要包住所有的组件 */}
            {/* <Redirect from='/' to='/login' exact></Redirect> */}
            <Route path="/test" component={Test}></Route>
            <Route path="/login" component={Login}></Route>
            {/* 删除一级路由中layout的路径,修复模糊匹配 */}
            <Route path="/" 
              // component={Layout}
              render={(props)=>{
                {/* 除了login，其它的路由，每次匹配倒要经过权限判断 */}
                if(getToken()){
                  // 有无token
                  // 1. 有token，显示Layout进入后台页面
                  return <Layout {...props}></Layout>
                }else{
                  // 2. 没有token，重定向到登录页
                  props.history.push('/login');
                }
              }}
            ></Route>
             <AuthRoute path="/" component={Layout}></AuthRoute>
          </Switch>
        </Router>
      </div>
    )
  }
}
